<template>
    <div class="bepaid">
        <!-- 选择关闭原因 -->
        <div class="order-box">
            <img v-if="lang=='zh' "  class="label" src="http://img.xianyufanshen.net//order/images/shenqingguanbiyuanyin@2x.png" alt="">
            <img v-else class="label en" src="http://img.xianyufanshen.net//image/jpg/engxuanzeguanbiyuanyin_eng@2x.png" alt="">
            <div class="checkbox">
                <div class="item" v-for="(item,index) in options" :key="index" @click="tabs(index)">
                    <i :class="{active:index ==checked}"></i>
                    {{item}}
                </div>
            </div>
        </div>
        <!-- 底部提示 -->
        <div class="tip"  v-if="lang=='zh' ">
            <i></i>主动申请关闭交易，平台将没收保证金，请谨慎选择
        </div>
        <div class="tip"  v-else>
            <i></i>Proactively apply to close the transaction, the platform will forfeit the deposit, please choose carefully
        </div>
        <!-- 优惠买单按钮 -->
        <div v-if="lang=='zh' "  class="btn-box" @click="confirm">确认关闭</div>
        <div v-else class="btn-box" @click="confirm">Confirm closed</div>
        <!-- loading -->
        <div class="loading-box" v-show="loading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>
<script>
import {postCloseOrder,} from '@/api/order/exchange'
import {postmyExchangeClose} from '@/api/my/myexchange'
import {postmyPurchaseClose} from '@/api/my/myBuy'
import { Loading,Toast,} from 'vant';

export default {
    name:'fackOf',
    //声明组件
    components:{
        [Loading.name]:Loading,
        [Toast.name]:Toast,
     
    },
    data (){
        return{
           lang:'zh',//当前网页语言类型 zh 中文  en 英语  
           id:0,//当前订单id
           userId:0,//用户id 
           options:[],//拒绝售卖原因
           loading:false,//是否现在加载中
           checked:0,//当前选中项的下标
           reason:'',//关闭原因
           isMychange:false,//是否跳转到我的置换列表 true:跳转到我的置换列表 
           isMyGoods:false,  //是否跳转到我的购买列表  true:跳转到我的购买列表
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
            if(this.lang == 'zh'){
                this.options = [ '不想置换，中途反悔','已与平台协商，同意关闭交易','藏品出现问题，关闭交易',];//拒绝售卖原因
            }else{
                this.options = [ "Don't want to replace, go back halfway",
                'Has negotiated with the platform and agreed to close the transaction',
                'There is a problem with the product, closing the transaction',];//拒绝售卖原因
            }
        }
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
        //获取订单id
        if(this.$route.query.id && this.$route.query.id > 0){
            this.id = this.$route.query.id;
        }else{
            Toast('获得订单ID失败，请返回列表页重试'); 
            this.loading = false;
        }
        //获取是否跳转到我的置换列表
        if(this.$route.query.isMychange){
            this.isMychange = this.$route.query.isMychange;
        }
        //获取是否跳转到我的购买列表
        if(this.$route.query.isMyGoods){
            this.isMyGoods = this.$route.query.isMyGoods;
        }
        this.reason = this.options[0];//初始化原因
    },
    //
    methods:{
        //点击地址切换选中项
        tabs(index){
            // console.log("选中了",index);
            this.checked = index;
            this.reason = this.options[index];
        },
        //确认关闭
        confirm(){
            //加载中
            this.load = true;
            let param = {};
            param.orderId = this.id;
            param.reason = this.reason;
            param.lang = this.lang;
            if(this.isMychange){//true:跳转到我的置换列表 
                postmyExchangeClose(param).then(res => {
                    if(res.code == 200){
                        //隐藏加载中
                        this.load = false;  
                        let para = {};
                        if(this.lang == 'zh'){
                            para.title = "申请关闭交易";
                        }else{
                            para.title = "Apply to close the transaction";
                        }
                        para.url = "/myorderFail?type=6&status=0&userId="+this.userId+"&lang="+this.lang;
                        console.log(para)
                        this.interaction.hLink(para);
                    }else{
                        Toast(res.msg);
                    }
                })
            }else if(this.isMyGoods){//true:跳转到我的购买列表 
                postmyPurchaseClose(this.id,this.reason,this.lang).then(res => {
                    if(res.code == 200){
                        //隐藏加载中
                        this.load = false;  
                        //跳转到申请关闭成功
                        let para = {};
                        var title = '';
                        if(this.lang== 'zh')
                        title = '申请关闭';
                        else
                        title = 'Apply Close';
                        para.title = title;
                        para.url = "/myorderFail?type=6&userId="+this.userId+"&lang="+this.lang+"&status=1";
                        console.log(para)
                        this.interaction.hLink(para);
                    }else{
                        Toast(res.msg);
                    }
                }) 
            }else{
                postCloseOrder(param).then(res => {
                    if(res.code == 200){
                        //隐藏加载中
                        this.load = false;  
                        // this.$router.push({path: '/orderSuccess', query: {type:4,status:0}});  
                        let para = {};
                        
                        if(this.lang == 'zh'){
                            para.title = "申请关闭交易";
                        }else{
                            para.title = "Apply to close the transaction";
                        }
                        para.url = "/orderSuccess?type=4&status=0&lang="+this.lang;
                        console.log(para)
                        this.interaction.hLink(para);
                    }else{
                        Toast(res.msg);
                    }
                }) 
            }
        },
    }
    
}
</script>

<style lang="stylus" scoped>
.bepaid{
    height:100%;
}
// 订单顶部信息
.order-box{
   padding : .266667rem; 
   text-align :center;
   background :#fff;
   margin-bottom :.186667rem;
   img.label{
       width :3.76rem;
       height :auto;
       margin-top :.133333rem;
       margin-bottom :.4rem;
       &.en{
         width :4.2rem;
       }
   } 

   
}
//关闭原因
.checkbox{
    padding :0 .266667rem;
    .item{
        margin-bottom :.666667rem;
        padding-left :.666667rem;
        position:relative;
        font-family:PingFangSC-Regular;
        font-size:.346667rem;
        color:#494949;
        line-height :.48rem;
        text-align:left;
        i{
            width :.426667rem;
            height :.426667rem;
            position :absolute;
            left :0;
            top:50%;
            margin-top :-0.213333rem;
            background :url("http://img.xianyufanshen.net//order/images/weixuanzhong_yuanyin@2x.png") no-repeat;
            background-size :100%; 
            &.active{
                background :url("http://img.xianyufanshen.net//order/images/xuanzhong_yuanyin@2x.png") no-repeat;
                background-size :100%; 
            }  
        }
    }
}
//提示
.tip{
    padding :0 .266667rem  0 .746667rem;
    margin-top:.266667rem;
    position:relative;
    font-family:PingFangSC-Regular;
    font-size:.32rem;
    color:#a2a2a2;
    letter-spacing:.008rem;
    i{
      width :.32rem;
      height :.32rem;
      position :absolute;
      left :.266667rem;
      top:50%;
      margin-top :-0.16rem;
      background :url("http://img.xianyufanshen.net//order/images/tishi_woyaofahuo@2x.png") no-repeat;
      background-size :100%;  
    }
}  
// 底部操作按钮
.btn-box{
    position :fixed;
    left 0;
    bottom:0;
    opacity:0.9;
    width :100%;
    background:#ffffff;
    height:1.2rem;
    line-height :1.2rem;
    z-index: 999;
    text-align:center;
    font-family:PingFangSC-Medium;
    font-size:.4rem;
    color:#cb9c57;
    letter-spacing:.0056rem;
}
.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
</style>


